<template>
	<view class="container">
		<view class="top-view">
			<children-base-top-view :name="children.name" :gender="children.gender" :imgUrl="children.imgUrl"
				:month="children.month"
				 :birthday="children.birthday"/>
		</view>

		<u-tabs :list="tabList" :is-scroll="false" :current="current" @change="change"
			:active-color="appTheme.checkColor" :inactive-color="appTheme.checkColor"></u-tabs>
		<scroll-view v-for="(tab, tabIndex) in tabList" class="body" v-show="tabIndex === current"
			:scroll-y="true">
			<view v-for="(item, index) in tab.list" class="evlItem">
				<view class="evaluate-item" @click="itemClick(tabIndex, item)">
					<view class="title">{{tabIndex === 0 ? `里程碑${item.monthAge}` : `发展里程检表${item.month}`}}月龄</view>
					<view class="time">{{$u.timeFormat(item.created, 'yyyy-mm-dd')}}</view>
					<view class="evaluate-more">
						<view class="month">
							测评时月龄:{{tabIndex === 0 ? item.childrenMonthAge : item.childrenMonth}}
						</view>
						<view class="teacher">
							测评人:{{item.createdBy}}
						</view>
					</view>
				</view>
			</view>
			<u-loadmore v-if="!tab.emptyShow" :status="tab.status" />
			<u-empty class="noContent" v-if="tab.emptyShow" text="暂时没有内容哦～"  mode="list"></u-empty>
		</scroll-view>
	</view>
</template>

<script>
	import { formatDateByTimestamp } from '@/utils/utils.js'
	import ChildrenBaseTopView from '@/components/children-base-top-view.vue'
	import { getGrowthChildrenList, getChildrenDetailsList } from './api/growth.js'
	import {
		mapState,
	} from 'vuex';
	export default {
		components: {
			ChildrenBaseTopView
		},
		computed: {
			...mapState({
				appTheme: state => state.app.appTheme
			})
		},
		data() {
			return {		
				tabList: [{
					name: "里程碑",
					list: [],
					page: -1,
					status: 'loadmore',
					emptyShow: false
				}, {
					name: "发展里程检表",
					list: [],
					page: -1,
					status: 'loadmore',
					emptyShow: false
				}],
				current: 0,
				status: 'loadmore',
				
				children: {},
			}
		},
		onLoad(options) {
			console.log(options);
			this.children = options;
			this.getList(-1, 0)
			this.getList(-1, 1)
		},
		onShow() {
		},
		methods: {
			itemClick(tabIndex, item) {
				if (tabIndex === 0) {
					this.$u.route({
						url: 'pages_teach/growth/milepost-detail-page',
						params: {
							'id': item.id,
						}
					})
				} else if (tabIndex === 1) {
					this.$u.route({
						url: 'pages_teach/growth/check-list-page',
						params: {
							'id': item.developUserId,
						}
					})
				}
			},
			setData(res, current) {	
				if (res.data.last) {
					this.tabList[current].status = 'nomore';
				} else {
					this.tabList[current].status = 'loadmore';
				}
				this.tabList[current].page = res.data.number;
				if (this.tabList[current].page === 0) {
					this.tabList[current].list = res.data.content;
					if (this.tabList[current].list.length === 0) {
						this.tabList[current].emptyShow = true;
					}
				} else {
					this.tabList[current].list = this.tabList[current].list.concat(res.data.content);
				}
			},
			
			getList(page, current) {
				const params = {
					pageNum: page + 1,
					pageSize: 10,
					type: 0,
				}
				if ( current === 0) {
					getGrowthChildrenList({ childrenId: this.children.id }).then(res => {
						this.setData(res, current);
					})
				} else {
					getChildrenDetailsList({ childrenId: this.children.id }).then(res => {
						this.setData(res, current);
					})
				}
			},
			loadMore() {
				const { current, tabList } = this;
				const status = tabList[current].status;
				const page = tabList[current].page;
				if (status === 'nomore') {
					return;
				}
				this.tabList[current].status = 'loading';
				this.getList(page, current);
			},
			onReachBottom() {
				this.loadMore();
			},
			change(index) {
				this.current = index;
			}
		}
	}
</script>

<style lang="scss">
	page{
		height: 100%;
		background-color: $app-page-bg-color;
	}
	.container{
		margin-top: 20rpx;
		display: flex;
		flex-direction: column;

		.top-view{
			display: flex;
			justify-content: center;
			align-items: center;
		}
		
		.body{

		}
	}
	
	.evlItem {
		background-color: #FFFFFF;
		border-radius: 20rpx;
		padding-left: 30rpx;
		padding-right: 30rpx;
		padding-top: 20rpx;
		padding-bottom: 20rpx;
		margin-top: 20rpx;
		margin-bottom: 20rpx;
		margin-left: 30rpx;
		margin-right: 30rpx;
	}
	
	.evaluate-item{
		display: flex;
		flex-direction: column;
		color: $app-font-color;
		.title{
			font-size: 30rpx;
			font-weight: bold;
		}
		
		.time{
			font-size: 26rpx;
			margin-top: 10rpx;
		}
		
		.evaluate-more{
			display: flex;
			flex-direction: row;
			margin-top: 10rpx;
			font-size: 22rpx;
			.month{
				
			}
			
			.teacher{
				margin-left: 20rpx;
			}
		}
	}
</style>
